<script setup lang="ts">
import { useTable } from '@/hooks/modules/useTable';
import {type QueryRequest, getLoginList } from '@/api/system/log';
import type { TableInstanceColumns } from '@/components/BhTable'
import { isMobile } from '@/utils'
import { formatDate } from '@/utils';

const emits = defineEmits([
  'openDetails',
]);
const queryForm = reactive<QueryRequest>({
  username: undefined,
  ip:undefined,
  time:undefined
});
const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => getLoginList({ ...queryForm, ...page }), {
  immediate: true,
});
const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '操作账号', dataIndex: 'username', slotName: 'username', align: 'center',ellipsis: true, tooltip: true },
  { title: '请求方法', dataIndex: 'method', slotName: 'method', align: 'center',ellipsis: true, tooltip: true },
  { title: '操作模块', dataIndex: 'module', slotName: 'module', align: 'center',ellipsis: true, tooltip: true },
  { title: '请求参数', dataIndex: 'param', slotName: 'param', align: 'center',ellipsis: true, tooltip: true },
  { title: '请求地址', dataIndex: 'url', slotName: 'url', align: 'center',ellipsis: true, tooltip: true },
  { title: 'IP地址', dataIndex: 'ip', slotName: 'ip', align: 'center',ellipsis: true, tooltip: true },
  { title: 'IP所属地', dataIndex: 'ip_city', slotName: 'ip_city', align: 'center',ellipsis: true, tooltip: true },
  { title: '操作系统', dataIndex: 'os', slotName: 'os', align: 'center',ellipsis: true, tooltip: true },
  { title: '浏览器', dataIndex: 'browser', slotName: 'browser', align: 'center',ellipsis: true, tooltip: true },
  { title: '类型', dataIndex: 'updateTime',align: 'center', width: 180, render: ({ record }) => {
      return ['登录系统', '注销系统', '操作日志'][record.type - 1];
    },
  },
  { title: '操作时间', dataIndex: 'create_time',align: 'center', width: 180},
  // {
  //   title: '操作',
  //   dataIndex: 'handle',
  //   slotName: 'handle',
  //   width: 200,
  //   align: 'center',
  //   fixed: !isMobile() ? 'right' : undefined,
  // },
]
//重置搜索
const reset = () => {
  queryForm.username = undefined
  queryForm.ip=undefined
  queryForm.time=undefined
  search()
}



</script>

<template>
  <div >
    <BhTable
        row-key="id"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :data="dataList as []"
        :columns="columns"
        @refresh="search"
        :loading="loading"
        :pagination="pagination"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.username" placeholder="搜索登录用户" allow-clear >
          <template #prefix><icon-search /></template>
        </a-input>
        <a-input v-model="queryForm.ip" placeholder="搜索登录IP" allow-clear>
          <template #prefix><icon-search /></template>
        </a-input>
        <BhDateRangePicker v-model="queryForm.time" />
        <a-space >
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('common.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('common.reset') }}
          </a-button>
        </a-space>
      </template>
      <!-- 操作 -->
      <template #handle="{ record }">
        <!-- 详情 -->
        <a-button
            v-permission="['sys:login:log:info']"
            type="text"
            size="mini"
            @click="emits('openDetails', record)"
        >
          详情
        </a-button>
      </template>

    </BhTable>
  </div>
</template>

<style scoped lang="less"></style>
